<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/echarts/src/echarts.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/echarts/src/echarts.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>

  /**
   * ECharts图表覆盖物组件
   * @module xdh-map-echarts
   */

  import {getParent, mapReady} from 'utils/util'
  import CleanMixin from 'utils/mixins/clean'
  import createCoordSystem from 'utils/plugins/CoordSystem'

  export default {
    name: 'XdhMapEcharts',
    mixins: [CleanMixin],
    /**
     * 参数属性
     * @member props
     * @property {object} lib ECharts类库
     * @property {object} options ECharts实例化参数选项，涉及到 coordinateSystem 需要设置为 ol
     */
    props: {
      // ECharts类库
      lib: {
        type: Object,
        required: true
      },
      // ECharts 配置参数
      options: Object
    },
    watch: {
      options() {
        this.postRender()
      }
    },
    methods: {
      // 由于Openlayers与Echarts的click事件有冲突，Echarts触发不了click事件, 需要用mouse事件触发click
      fixClickEvent() {
        if (!this.map || !this.chart) return

        this.proxyMapHandleClick = e => {
          if (this.eventData) {
            this.$emit('click', this.eventData)
          }
        }
        this.proxyChartMouseOver = e => {
          this.eventData = e
        }
        this.proxyChartMouseOut = e => {
          this.eventData = null
        }
        this.map.on('click', this.proxyMapHandleClick)
        this.chart.on('mouseover', this.proxyChartMouseOver)
        this.chart.on('mouseout', this.proxyChartMouseOut)
      },
      postRender() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.registerCoordinateSystem()
          const el = this.createContainer()
          const chart = this.createChart(el)
          chart.setOption(this.options || {})
          this.resize(chart)
        }, 100)
      },
      resize(chart) {
        if (!this.container || !this.map) return

        const map = this.map
        const size = map.getSize()
        Object.assign(this.container.style, {
          height: size[1] + 'px',
          width: size[0] + 'px'
        })
        chart.resize()
      },
      createContainer() {
        if (!this.map) return
        if (this.container) return this.container

        const map = this.map
        const size = map.getSize()
        const div = document.createElement('div')
        Object.assign(div.style, {
          height: size[1] + 'px',
          width: size[0] + 'px',
          top: 0,
          left: 0,
          zIndex: 999,
          position: 'absolute'
        })

        this.container = div
        map.getViewport().appendChild(div)

        return this.container
      },
      registerCoordinateSystem() {
        if (!this.map || this.registered) return
        const coordSystem = createCoordSystem(this.map)
        this.lib.registerCoordinateSystem('ol', coordSystem)
        this.registered = true
      },
      createChart(el) {
        if (this.chart) return this.chart
        this.chart = this.lib.init(el)
        this.fixClickEvent()
        Object.keys(this.$listeners).forEach(key => {
          this.chart.on(key, this.$listeners[key])
        })
        return this.chart
      },
      ready(map) {
        this.map = map
        this.map.on('postrender', this.postRender)
      }
    },
    created() {
      this.parent = getParent.call(this)
      mapReady.call(this, this.ready)

    },
    beforeDestroy() {
      clearTimeout(this.timer)

      if (this.chart) {
        this.chart.off('mouseover')
        this.chart.off('mouseout')
        Object.keys(this.$listeners).forEach(key => {
          this.chart.off(key)
        })
        this.chart.dispose()
      }
      if (this.container) {
        this.container.parentNode.removeChild(this.container)
        this.container = null
      }
      if (this.map) {
        this.map.un('click', this.proxyMapHandleClick)
        this.map.un('postrender', this.postRender)
      }

    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li></ul><h3>Classes</h3><ul><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Mar 18 2019 15:18:38 GMT+0800 (China Standard Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
